<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>下拉菜单</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <ul class="nav nav-tabs">
        <li><a href="##">Home</a></li>
        <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li><a href="##">Responsive</a></li>
    </ul>


    <ul class="nav nav-tabs">
        <li><a href="##">Home</a></li>
        <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li><a href="##">Responsive</a></li>
    </ul>
    <br />
    <ul class="nav nav-tabs">
        <li class="active"><a href="##">Home</a></li>
        <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li><a href="##">Responsive</a></li>
    </ul>
    <br />
    <ul class="nav nav-tabs">
        <li class="active"><a href="##">Home</a></li>
        <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li class="disabled"><a href="##">Responsive</a></li>
    </ul>

    <ul class="nav nav-pills">
        <li class="active"><a href="##">Home</a></li>
        <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li class="disabled"><a href="##">Responsive</a></li>
    </ul>


    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="##">Home</a></li>
        <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li class="disabled"><a href="##">Responsive</a></li>
    </ul>

    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="##">Home</a></li>
        <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li class="nav-divider"></li>
        <li class="disabled"><a href="##">Responsive</a></li>
    </ul>

    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="##">Home</a></li>
        <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li><a href="##">Responsive</a></li>
    </ul>

    <h4>自适应导航（实现原理</h4>
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="##">Home</a></li>
        <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li><a href="##">Responsive</a></li>
    </ul>
    <br />
    <ul class="nav nav-pills nav-justified">
        <li class="active"><a href="##">Home</a></li>
        <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li><a href="##">Responsive</a></li>
    </ul>
    <h4>导航加下拉菜单（二级导航）</h4>

    <ul class="nav nav-pills">
        <li class="active"><a href="##">首页</a></li>
        <li class="dropdown">
            <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="##">CSS3</a></li>
                <li><a href="##">Sass</a></li>
                <li><a href="##">jQuery</a></li>
                <li><a href="##">Responsive</a></li>
            </ul>
        </li>
        <li><a href="##">关于我们</a></li>
    </ul>
    <br />
    <h4>面包屑式导航</h4>
    <ol class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li><a href="#">我的书</a></li>
        <li class="active">《图解CSS3》</li>
    </ol>

    <h4>基本导航条</h4>

    <div class="navbar navbar-default" role="navigation">
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
        </ul>
    </div>
    <div class="navbar navbar-default" role="navigation">

        <div class="navbar-header">
            <a href="##" class="navbar-brand">慕课网</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">网站首页</a></li>
            <li class="dropdown">
                <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="##">CSS3</a></li>
                    <li><a href="##">JavaScript</a></li>
                    <li class="disabled"><a href="##">PHP</a></li>
                </ul>
            </li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
        </ul>
        <form action="##" class="navbar-form navbar-left" rol="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="请输入关键词" />
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
        </form>
    </div>

    <h4>为导航条添加标题、二级菜单及状态</h4>
    <div class="navbar navbar-default" role="navigation">

        <div class="navbar-header">
            <a href="##" class="navbar-brand">慕课网</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
        </ul>
    </div>
    <!--导航条状态及二级菜单-->
    <div class="navbar navbar-default" role="navigation">

        <div class="navbar-header">
            <a href="##" class="navbar-brand">慕课网</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">网站首页</a></li>
            <li class="dropdown">
                <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="##">CSS3</a></li>
                    <li><a href="##">JavaScript</a></li>
                    <li class="disabled"><a href="##">PHP</a></li>
                </ul>
            </li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
        </ul>
    </div>

    <h4>带表单的导航条</h4>
    <div class="navbar navbar-default" role="navigation">

        <div class="navbar-header">
            <a href="##" class="navbar-brand">慕课网</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">网站首页</a></li>
            <li class="dropdown">
                <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="##">CSS3</a></li>
                    <li><a href="##">JavaScript</a></li>
                    <li class="disabled"><a href="##">PHP</a></li>
                </ul>
            </li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
        </ul>
        <form action="##" class="navbar-form navbar-left" rol="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="请输入关键词" />
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
        </form>
    </div>
    <h4>导航条中的按钮、文本和链接</h4>

    <div class="navbar navbar-default" role="navigation">

        <div class="navbar-header">
            <a href="##" class="navbar-brand">慕课网</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="##" class="navbar-text">Navbar Text</a></li>
            <li><a href="##" class="navbar-text">Navbar Text</a></li>
            <li><a href="##" class="navbar-text">Navbar Text</a></li>
        </ul>
    </div>

    <div class="navbar navbar-default" role="navigation">

        <div class="navbar-header">
            <a href="##" class="navbar-brand">慕课网</a>
        </div>
        <div class="nav navbar-nav">
            <a href="##" class="navbar-text">Navbar Text</a>
            <a href="##" class="navbar-text">Navbar Text</a>
            <a href="##" class="navbar-text">Navbar Text</a>
        </div>
    </div>

    <h4>固定导航条</h4>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">

        <div class="navbar-header">
            <a href="##" class="navbar-brand">慕课网</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
        </ul>
    </div>
    <div class="content">我是内容</div>
    <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
        <div class="navbar-header">
            <a href="##" class="navbar-brand">慕课网</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
        </ul>
    </div>
    <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
    <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
    <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>
    <p>网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容，网页正文内容。</p>

    <h4>响应式导航条</h4>

    <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">

            <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
            <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
            <a href="##" class="navbar-brand">慕课网</a>
        </div>
        <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
        <div class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="##">网站首页</a></li>
                <li><a href="##">系列教程</a></li>
                <li><a href="##">名师介绍</a></li>
                <li><a href="##">成功案例</a></li>
                <li><a href="##">关于我们</a></li>
            </ul>
        </div>
    </div>

    <h4>反色导航条</h4>
    <p>与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。</p>

    <div class="navbar navbar-inverse" role="navigation">
        <div class="navbar-header">
            <a href="##" class="navbar-brand">慕课网</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="">首页</a></li>
            <li><a href="">教程</a></li>
            <li><a href="">关于我们</a></li>
        </ul>
    </div>
    <h4>分页导航（带页码的分页导航）</h4>
    <p></p>


    <ul class="pagination pagination-lg">
        <li><a href="#">&laquo;第一页</a></li>
        <li><a href="#">11</a></li>
        <li><a href="#">12</a></li>
        <li class="active"><a href="#">13</a></li>
        <li><a href="#">14</a></li>
        <li><a href="#">15</a></li>
        <li class="disabled"><a href="#">最后一页&raquo;</a></li>
    </ul>

    <ul class="pagination pagination">
        <li><a href="#">&laquo;第一页</a></li>
        <li><a href="#">11</a></li>
        <li><a href="#">12</a></li>
        <li class="active"><a href="#">13</a></li>
        <li><a href="#">14</a></li>
        <li><a href="#">15</a></li>
        <li class="disabled"><a href="#">最后一页&raquo;</a></li>
    </ul>
    <ul class="pagination pagination-sm">
        <li><a href="#">&laquo;第一页</a></li>
        <li><a href="#">11</a></li>
        <li><a href="#">12</a></li>
        <li class="active"><a href="#">13</a></li>
        <li><a href="#">14</a></li>
        <li><a href="#">15</a></li>
        <li class="disabled"><a href="#">最后一页&raquo;</a></li>
    </ul>

    <h4>分页导航（翻页分页导航）</h4>

    <ul class="pager">
        <li><a href="#">&laquo;上一页</a></li>
        <li><a href="#">下一页&raquo;</a></li>
    </ul>
    <!--左右对齐-->
    <ul class="pager">
        <li class="previous"><a href="#">&laquo;上一页</a></li>
        <li class="next"><a href="#">下一页&raquo;</a></li>
    </ul>
    <!--禁止状态-->
    <ul class="pager">
        <li class="disabled"><span>&laquo;上一页</span></li>
        <li><a href="#">下一页&raquo;</a></li>
    </ul>

    <h4>标签</h4>

    <h3>Example heading <span class="label label-default">New</span></h3>
    <!--代码-->
    <span class="label label-default">默认标签</span>
    <span class="label label-primary">主要标签</span>
    <span class="label label-success">成功标签</span>
    <span class="label label-info">信息标签</span>
    <span class="label label-warning">警告标签</span>
    <span class="label label-danger">错误标签</span>

    <h4>徽章</h4>

    <a href="#">Inbox <span class="badge">42</span></a>
    <!--navbar-default导航条勋章-->
    <div class="navbar navbar-default" role="navigation">
    
        <div class="navbar-header">
            <a href="##" class="navbar-brand">慕课网</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例<span class="badge">23</span></a></li>
            <li><a href="##">关于我们</a></li>
        </ul>
    </div>
    <!--nav-pills导航条勋章-->
    <ul class="nav nav-pills">
        <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages <span class="badge">3</span></a></li>
    </ul>
    <br />
    <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
        <li class="active">
            <a href="#">
                <span class="badge pull-right">42</span> Home
            </a>
        </li>
        <li><a href="#">Profile</a></li>
        <li>
            <a href="#">
                <span class="badge pull-right">3</span> Messages
            </a>
        </li>
    </ul>
    <br />
    <!--按钮勋章-->
    <button class="btn btn-primary" type="button">
      Messages <span class="badge">4</span>
</button>


    <!--model-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

</html>